<template>
    <div class="container">
        <el-card class="mainCard" v-show="show == 0">
             <div class="mainCardHeader" @click="add">
                <i class="el-icon-plus">添加</i>
             </div>
             <div class="mainCardBody">
                <div class="row" v-for="(items, rowIndex) in this.dataList" :key="rowIndex">  
                    <div class="item" v-for="item in items" :key="item.id">  
                            <div class="picture">
                            <el-image :src="item.picture" :preview-src-list="[item.picture]" style="width:100%; height: 100%" ></el-image>
                            </div>
                            <div class="introduce" v-html="item.introduce" @click="getDetail(item.id)"></div>
                    </div>  
                    </div>  
             </div>
             <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[5, 10, 20, 50]"
                :page-size=queryInfo.pageSize
                layout="total, prev, pager, next, jumper"
                :total=total>
                </el-pagination>
        </div>
    </el-card>
    <div v-if="show == 1">
        <!-- 添加 -->
            <el-card style="padding-bottom: 20px;" class="addCard">
                <div slot="header">新增地点</div>
                <div>
                    <el-form :model="addForm" label-width="120px" :rules="addRules" ref="addFormRef">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="addForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" prop="picture">
                            <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="addForm.picture" :src="addForm.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-form-item>
                        <el-form-item label="添加到知识库"> 
                            <el-upload
                            class="upload-demo"
                            action="http://localhost:9000/knowledgeBase/uploadKnowledgeBase"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="介绍" prop="introduce">
                            <QuillEditor :content="addForm.introduce" @contentChange="getPrivacyAgreement"></QuillEditor>
                       </el-form-item>
                    </el-form>
                </div>
                <div style="float: right;">
                    <el-button type="info" @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="SureAdd">发布</el-button>
                </div>
            </el-card>
    </div>
    <div v-if="show == 2">
        <el-card style="padding-bottom: 20px;" class="editCard">
                <div slot="header">修改导师介绍</div>
                <div>
                    <el-form :model="editForm" label-width="80px" :rules="addRules" ref="addFormRef">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="editForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" prop="picture">
                            <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/files/upload"
                            :show-file-list="false"
                            :on-success="editHandleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="editForm.picture" :src="editForm.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-form-item>
                        <el-form-item label="介绍" prop="introduce">
                            <QuillEditor :content="editForm.introduce" @contentChange="getPrivacyAgreement"></QuillEditor>
                       </el-form-item>
                    </el-form>
                </div>
                <div style="float: right;">
                    <el-button type="info" @click="cancelEdit">取消</el-button>
                    <el-button type="danger" @click="del">删除</el-button>
                    <el-button type="primary" @click="SureEdit">发布</el-button>
                </div>
            </el-card>
        <!-- 修改 -->
    </div>
    <div v-if="show == 3" >
        <!-- 详情 -->
         <el-card class="detailCard">
            <div class="detailCardHeader">
                <div @click="back" class="back" >
                <i class="el-icon-back" >返回</i>
                </div>
                <div @click="edit(detailForm.id)" style="cursor: pointer;font-size: 16px;color: rgb(125, 160, 230);">编辑</div>
            </div>
             <div style="font-size: 16px;">
                <img :src="detailForm.picture" alt="" width="200px" height="200px" >
                <span>姓名：</span>
                <span>{{ detailForm.name }}</span>
             </div>
             <div v-html="detailForm.introduce" class="detailContent"></div>
         </el-card>
    </div>
    </div>
</template>
<script>
import QuillEditor from '@/components/QuillEditor.vue';
import {formatTimestampWithOffset} from '@/utils/formatTimestampWithOffset.js'
export default {
    components:{QuillEditor},
    data(){
        return {
            queryInfo:{
                pageNum:1,
                pageSize:8
            },
            dataList:[],
            total:0,
            show:0,
            addForm:{},
            editForm:{},
            detailForm:{},
            addRules:{
                name:[{required:true,message:'姓名不能为空',trigger:'blur'}],
                picture:[{required:true,message:'图片不能为空',trigger:'blur'}],
                introduce:[{required:true,message:'介绍不能为空',trigger:'blur'}]
            }
        }
    },
    methods:{
        chunkedData(dataList) {  
            // 将数据分割成每行chunkSize个数据项的数组  
            let result = [];  
            for (let i = 0; i < this.dataList.length; i += 4) {  
                let chunk = this.dataList.slice(i, i + 4);  
                result.push(chunk);  
            }  
            return result;  
        },
        //获取所有通知新
        async getMentorDemeanor(){
            const {data:res} = await this.$http.post("/getAllMentorDemeanorList",this.queryInfo );
            if(res.code === 200){
                this.dataList = res.data;
                this.dataList = this.chunkedData(this.dataList)
                this.total = res.count;
            }
        },
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getMentorDemeanor();
        },
        handleCurrentChange(newPage){            
            this.queryInfo.pageNum = newPage;
            this.getMentorDemeanor();
        },
        handleAvatarSuccess(res){
            this.addForm.picture = res;        
        },
        editHandleAvatarSuccess(res){
            this.editForm.picture = res;
        },
        add(){
            this.show = 1;
        },
        async SureAdd(){
            this.$refs.addFormRef.validate(async valid=>{
                const {data:res} = await this.$http.post('/addMentorDemeanor',this.addForm)
                if(res.code === 200){
                    this.$message.success(res.message);
                    this.show = 0;
                    this.getMentorDemeanor()
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        cancelAdd(){
            this.addForm = {}
            this.show = 0;
        },
        
       getPrivacyAgreement(val) {
        if(this.show === 1){
            this.addForm.introduce = val;
            }else if(this.show === 2){
                this.editForm.introduce = val;
            }
        },
        async getDetail(id){
            this.show = 3;
            const {data:res} = await this.$http.get('/getMentorDemeanor?id='+id);
            if(res.code === 200){
                this.detailForm = res.data;
            }else{
                this.$message.error(res.message);
            }
        },
        back(){
            this.show = 0;
        },

        async edit(id){
            this.show = 2;
            const {data:res} = await this.$http.get('/getMentorDemeanor?id='+id);
            if(res.code === 200){
                this.editForm = res.data;
            }else{
                this.$message.error(res.message);
            }
        },
        cancelEdit(){
            this.show = 3;
            this.editForm = {}
        },
        SureEdit(){
            this.$refs.addFormRef.validate(async valid=>{
                const {data:res} = await this.$http.post('/updateMentorDemeanor',this.editForm)
                if(res.code === 200){
                    this.$message.success(res.message);
                    this.show = 3;
                    this.getDetail(this.editForm.id)
                    this.getMentorDemeanor()
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        async del(){
            const {data:res} = await this.$http.delete('/deleteMentorDemeanor?id='+this.editForm.id);
            if(res.code === 200){
                this.$message.success(res.message);
            }else{
                this.$message.error(res.message);
            }
            this.show = 0;
            this.editForm = {}
            this.detailForm = {}
            this.getMentorDemeanor()
        }
    },
    created(){
        this.getMentorDemeanor();
    }
}
</script>
<style lang="less" scoped>
.container{
    .mainCard{
        height: 100vh;
        .mainCardHeader{
            float: right;
            height: 20px;
            cursor: pointer;
            font-size: 16px;
            color: rgb(125, 160, 230);
        }
        .mainCardBody{
            height: 84vh;
            margin: 35px 10px;
            .row{
                display: flex;
                // justify-content: space-around;
                height: 42vh;
                .item{
                    border: solid 1px rgb(235, 235, 235);
                    margin: 5px;
                    width: 24%;
                    border-radius: 8px;
                    .picture{
                        height: 60%;
                        width:100%
                    }
                    .introduce{
                        height: 40%;
                        cursor: pointer;
                        font-size: 16px;
                        color: rgb(85, 84, 84);
                    }
                }
            }
        }
        .pagination{
            float: right;
        }
    }
    .addCard{
        // height: 100vh;
    }
    .editCard{

    }
    .detailCard{
        height: 100vh;
        .detailCardHeader{
            display: flex;
            justify-content: space-between;
            .back{
            cursor: pointer;
            font-size: 14px;
            color: gray;
        }
        }
        .detailContent{
            height: 100vh;
            overflow-y: auto;
            padding: 0 30px 20px 30px;
            font-size: 18px;
            color: rgb(97, 97, 97);
        }
    }
}

</style>